<template>
      <div style=" display: flex;justify-content: space-between; align-items: center; height:60px;">
         <div style=" height: 60px;"><h3 style="color: #fff;" >首页</h3> </div>
          <el-dropdown  trigger="click" style="display:flex;">
            <span>
              <img :src="user.avatar" style="height: 50px;width: 50px; border-radius:50% ;">
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  @click.native="selectScore">查看成绩</el-dropdown-item>
              <el-dropdown-item  @click.native="mess">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          
      </div> 
<!--      <div>
         <div class="l-content">
         
        <h3 style="color: #fff;">首页</h3> 
    </div>
    <div class="r-content">
        <el-dropdown trigger="click" szie="mine">
            <span>
                <img  class="user" :src="user.avatar" style="40px;width: 40px; border-radius:50% ">
            </span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item><span @click="logout">退出</span></el-dropdown-item>
              </el-dropdown-menu>
              </el-dropdown>
    </div>
     </div> -->
</template>
<script>
import request from '@/utils/request';
export default {
   name:'Header',
   props:{
     user:Object
   },
   data(){
     return{
       /* user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}, */
       username:JSON.parse(localStorage.getItem("user")).username,
       score:''
     }
   },
   methods:{
    logout(){
      this.$router.push('/login');
      localStorage.removeItem("user");
      localStorage.removeItem("menus");
      window.location.reload();
      this.$message.success("退出成功");
    },
    mess(){
      this.$router.push('/person')
    },
    selectScore(){
       request.get("/user/scores",{params:{
        username:this.username
       }}).then(res=>{
         this.score=res.data;
          this.$alert(this.score, '个人成绩', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `下次加油，争取更高`
            });
          }
        })
       })
       
    }
   }
}
</script>
<style scoped>
 l-content{
    display: flex;
     align-items: center;
 }
</style>